
.top{height:65px;width:100%;position: fixed;z-index: 100;}
.top i,.sound i{font-size:25px;font-weight:600;color:white;}
.sound i{font-size:20px;font-weight:500;color:#C6C8CA;}
.top .topbox{background:url(./image/1.jpg) 0 0;display: flex;align-items:center;position:relative;width:100%;padding-top:20px;height:65px;padding-left:15px;}
.father{display: flex;flex-direction:column;background:url(./image/1.jpg);position:relative;
  background-size:100% 100% ;}
.name{margin-left:20px ;margin-right:75px;height:100%;width:200px}
.name p{color:white;margin-bottom:5px;}
.name em{color:	#DBDBDB;font-size: 13px;}
.geci{height:auto;padding:64px 0;background:url(./image/1.jpg);}
.geci p{color:#6C6C6C;margin-bottom:34px;}
.geci .ing{color:white}
.gcbox{padding:330px 0;display:flex;flex-direction:column;align-items:center;position:absolute;background:url(./image/1.jpg);
 width:100%;}
 .soundbox{background:url(./image/1.jpg) 0px 65px;}
.sound{display:flex;align-items:center;padding-left:20px;width:100%;position:fixed;z-index: 100;}
.playbox{height:97px;position:fixed;bottom:0;width:100%;background:url(./image/1.jpg);left:0;z-index:1000;}
        /*进度条样式*/
        .progressBar{ width:75%; height: 10px; position:absolute;margin-left:40px;overflow: hidden;}
		.progressBar1{ width:70%; height: 10px; position:absolute;margin-left:40px;overflow: hidden;}
        .progressBar div,.progressBar1 div{ position: absolute;}
        .progressBar .progressBac{ width: 100%; height: 3px;  left: 0; top:0; background:#C8C9CC;top:3px;}
		.progressBar1 .progressBac1{ width: 100%; height: 1px;  left: 0; top:0; background:#C8C9CC;top:4px;}
		.progressBar1 .speed1{width: 100%; height: 1px; left: -100%; background:#FFF7CC; top:3px;}
        .progressBar .speed{width: 100%; height: 3px; left: -100%; background:#FFF7CC; top:3px;}
        .progressBar .drag,.progressBar1 .drag1{z-index: 10 ;width: 10px; height: 10px; left: 0;background:white; opacity: 0.8; border-radius:50%;}
        /*时间样式*/
        #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
        .tiemDetail{ position: absolute; right:10px; top:0;}
        #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e;   margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
        .shareImg{ position: absolute; left: 100000px;}
		.allTime{position:absolute;right:0px;font-size:10px;margin-right:10px;}
		.currentTime{position:absolute;left:0px;font-size:10px;margin-left:10px;}
		.jdt{position:absolute; left: 0;display: flex;width:100%;height:20px}
		.jdt span{color:moccasin}
		.con{position:absolute ;top: 30px;display:flex;align-items:center;justify-content: space-around;width:80%;margin-left:10%;}
		#control{border:none;background:none;}
		#control i{color:white;font-size:32px;}
		.con i{color:white;font-size:20px;}
		.img{width:100%;height:100%;color:green;position:fixed;z-index:101;background: #0000FE;top:65px;padding-bottom:100px;background:url(./image/1.jpg);}
		.img .start{animation-play-state:running}
		.img .end{animation-play-state:paused}
		.img img{height:250px;width:250px;border-radius: 50%;position:absolute;left:50%;top:18%;margin-left:-125px;-webkit-animation: haha1 9s linear infinite;}
		@-webkit-keyframes haha1 {
		  0% {
			-webkit-transform: rotate(0deg);
		  }

		  25% {
			-webkit-transform: rotate(90deg);
		  }

		  50% {
			-webkit-transform: rotate(180deg);
		  }

		  75% {
			-webkit-transform: rotate(270deg);
		  }

		  100% {
			-webkit-transform: rotate(360deg);
		  }
		}

		
		
		
		